<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>CSS样式实例</title>
        <style type="text/css">
           /*公共属性*/
           div,ul,li,a,h4{margin:0px;padding:0px;border:0px;}
           ul{list-style:none;}
           a{
                color:#000;text-decoration:none;
                font:normal 12px/1.5 "宋体",Verdana,Geneva,sans-serif;
            }
           a:hover{
                color:red;text-decoration:underline;
           }
           
           /*盒子模型属性设置*/
           .box{
                width:240px;
                border:1px solid #D5F9A1;
           }
           .box .header{
                width:100%;height:26px;
                background:url(../images/spph_bg.gif) repeat-x 0px 0px;
           }
           .box .header span{float:right;}
           .box .header span a{line-height:26px;color:green;margin-right:5px;}
           .box .header h4{font-size:13px;line-height:26px;margin-left:10px;color:green;}
           
           .box .body{width:100%;padding:5px;}
           .box .body ul li{
                line-height:25px;
                padding-left:20px;
                background:url(../images/spph_ico.gif) no-repeat 0px 7px;
           }
           .box .body ul li.tg1{background-position:0px 7px;}
           .box .body ul li.tg2{background-position:0px -17px;}
           .box .body ul li.tg3{background-position:0px -41px;}
           .box .body ul li.tg4{background-position:0px -65px;}
           .box .body ul li.tg5{background-position:0px -89px;}
           .box .body ul li.tg6{background-position:0px -113px;}
           .box .body ul li.tg7{background-position:0px -137px;}
           .box .body ul li.tg8{background-position:0px -161px;}
        </style>
    </head>
    <body>
        <h3>CSS实例：盒子模型设置</h3>
        <div class="box">
          <div class="header">
            <span><a href="#">更多>></a></span>
            <h4>商品排行</h4>
          </div>
          <div class="body">
              <ul>
                <li class="tg1"><a href="#">6月周年庆促销活动正式开始啦！</a></li>
                <li class="tg2"><a href="#">享不尽的百货盛宴！快来体验吧！</a></li>
                <li class="tg3"><a href="#">红六月手机家电会员回馈专场</a></li>
                <li class="tg4"><a href="#">收纳用品春季热销 方便实用</a></li>
                <li class="tg5"><a href="#">时尚挂表低折扣 精细准确</a></li>
                <li class="tg6"><a href="#">24小限时达，超时即免单</a></li>
                <li class="tg7"><a href="#">注意啦，24小时限时达活动细</a></li>
                <li class="tg8"><a href="#">2010年度家电风云榜评选结果揭晓</a></li>
              </ul>
          </div>
        </div>
    </body>
</html>